<template>
    <div class="paydiv1" 
    v-show="checked==1 && LeftChecked==99 && RightChecked==99">
        <div class="paydiv2row" v-for="row in 8" :key="row">
            <div class="paydiv3col" v-for="(data,indexup) in bankinfo[row-1]" :key="indexup"
            :style="BankiconShowstyle[indexup].value" 
            @click="BankBtn((row-1)*2+indexup)">
                <!-- style为专属调整建设银行logo和工商银行logo样式 -->
                <img :src="bankiconlist[row-1][indexup]" class="bankicon"
                :style="((row-1)*2+indexup)==3 || ((row-1)*2+indexup)==2?'margin-top:-2px;margin-right:-5px;margin-left:-5px;height:30px;width:30px':''">
                <span class="banktext">{{data.Bname}}</span>
            </div>
            <!-- 第几行第几列的序号为(m-1)*a+n,其中m为第几行,n为第几列,a为一行有几列。 -->
            <!-- 这里的v-for不能直接用4会有waring警告,所以把它再赋成一个多维数组 -->
            <div class="Note" v-for="(empty,indexdown) in emptylist[row-1]" :key="indexdown[row-1]" 
            :style="BankDownShowstyle[indexdown].value" v-show="NoteShow == (row-1)*2+indexdown">
                <span class="Notespan1" :style="LeftStyle"
                @click="LeftBtn((row-1)*2+indexdown,row-1,indexdown)">储蓄卡</span>
                <span class="Notespan2" :style="RightStyle"
                @click="RightBtn((row-1)*2+indexdown,row-1,indexdown)">信用卡</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'PxPBank',
        data(){
            return{
                checked:99,
                NoteShow:99,
                LeftStyle:'',
                RightStyle:'',
                LeftChecked:99,
                RightChecked:99,
                bankinfo:[  
                            [{'Pname':'BOC','Bname':'中国银行'},{'Pname':'ABC','Bname':'中国农业银行'}],[{'Pname':'CCB','Bname':'中国建设银行'},{'Pname':'ICBC','Bname':'中国工商银行'}],
                            [{'Pname':'BCM','Bname':'交通银行'},{'Pname':'BOB','Bname':'北京银行'}],[{'Pname':'CEB','Bname':'中国光大银行'},{'Pname':'CMBC','Bname':'中国民生银行'}],
                            [{'Pname':'CMB','Bname':'招商银行'},{'Pname':'CIB','Bname':'兴业银行'}],[{'Pname':'CITIC','Bname':'中信银行'},{'Pname':'FujianHaixia','Bname':'福建海峡银行'}],
                            [{'Pname':'Xiamen','Bname':'厦门银行'},{'Pname':'Guangfa','Bname':'中国广发银行'}],[{'Pname':'Ganzhou','Bname':'赣州银行'},{'Pname':'Quanzhou','Bname':'泉州银行'}],
                        ],
                bankiconlist:[[],[],[],[],[],[],[],[]],
                BankiconShowstyle:[
                    {'value':''},
                    {'value':'position: absolute;margin-top: -56px;margin-left: 200px;'},
                ],
                BankDownShowstyle:[
                    {'value':''},
                    {'value':'margin-left: 200px;'},
                ],
                emptylist:[[],[],[],[],[],[],[],[]],
                BankClickAgain:0,
                BankClickAgainValue:99,
            }
        },
        mounted(){
            for( let i=0 ; i<this.bankinfo.length ; i++){
                for(let j=0 ; j<this.bankinfo[i].length ; j++){
                    this.bankiconlist[i][j]=require(`../../../assets/bankicon/${this.bankinfo[i][j].Pname}.png`)
                    this.emptylist[i][j]=''
                }
            }
            // console.log('%%',this.emptylist);
            this.$bus.$on('TwoWayChecked',(TwoWayChecked)=>{
                this.checked=TwoWayChecked
            })
            this.$bus.$on('BankChecked',(LeftChecked,RightChecked)=>{
                //回来之后初始化
                this.BankClickAgain=0
                this.BankClickAgainValue=this.NoteShow=99
                this.LeftChecked=LeftChecked
                this.RightChecked=RightChecked
            })
        },
        beforeDestroy(){
            this.$bus.$off('TwoWayChecked')
            this.$bus.$off('BankChecked')
        },
        methods:{
            BankBtn(index){     //手机页面新增功能:再按一下会不显示
                if(!this.BankClickAgain){
                    if(this.BankClickAgainValue != index){
                        this.BankClickAgainValue=index
                        this.BankClickAgain=!this.BankClickAgain
                        this.NoteShow=index
                    }else{
                        this.BankClickAgain=!this.BankClickAgain
                        this.NoteShow=99
                        this.BankClickAgainValue=99
                    }
                }else{
                    if(this.BankClickAgainValue != index){
                        this.BankClickAgainValue=index
                        this.BankClickAgain=!this.BankClickAgain
                        this.NoteShow=index
                    }else{
                        this.BankClickAgain=!this.BankClickAgain
                        this.BankClickAgainValue=99
                        this.NoteShow=99
                    }
                }
                // console.log(index,'第几个');
                // console.log(this.BankClickAgain,'BankClickAgain');
                // console.log(this.BankClickAgainValue,'BankClickAgainValue');
            },
            LeftBtn(index,i,j){
                this.LeftChecked=index
                this.$bus.$emit('BankChecked',this.LeftChecked,this.RightChecked,this.bankiconlist[i][j],this.bankinfo[i][j].Bname)
            },
            RightBtn(index,i,j){
                this.RightChecked=index
                this.$bus.$emit('BankChecked',this.LeftChecked,this.RightChecked,this.bankiconlist[i][j],this.bankinfo[i][j].Bname)
            },
        },
    }
</script>

<style scoped>
.Note{
    padding-top: 2px;
    font-size: 14px;
    margin-left: 20px;
    position: absolute;
    color: white;
    z-index: 1;
}
.Notespan1{
    cursor: pointer;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 17px;
    padding-right: 17px;
    background-color: rgb(255, 170, 136);
}
.Notespan2{
    cursor: pointer;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 17px;
    padding-right: 17px;
    background-color: rgb(136, 187, 255);
}
.paydiv1{
    margin: 0 auto;
    height: 100%;
}
.paydiv2row{
    margin-top: 18px;
}
.paydiv3col{
    cursor: pointer;
    border: 1px solid rgb(214, 214, 214);
    height: 24px;
    width: 120px;
    padding: 15px;
    margin-left: 20px;
}
.bankicon{
    width: 20px;
    height: 20px;
}
.banktext{
    color: rgb(63, 63, 63);
    position: absolute;
    font-size: 15px;
    margin-left: 7px;
}
.paydiv4col{
    cursor: pointer;
    border: 1px solid rgb(214, 214, 214);
    height: 24px;
    width: 180px;
    padding: 15px;
    position: absolute;
    margin-top: -56px;
    margin-left: 265px;
}
</style>